<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <div class="form-row">
        <div class="col">
            <select onblur="get_city(this)" id="province" name="province" title="请选择所在省份" class="form-control">
                <option value="">选择省份</option>
                {volist name="province" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
        <div class="col">
            <select onblur="get_area(this)" id="city" name="city" title="请选择所在城市" class="form-control">
                <option value="">选择城市</option>
            </select>
        </div>
        <div class="col">
            <select id="district" name="district" title="请选择所在区县" class="form-control">
                <option value="">选择区域</option>
            </select>
        </div>
    </div>
</body>
</html>
<script>

    /**
     * 获取城市
     * @param t  省份select对象
     */
    function get_city(t) {
        var parent_id = $(t).val();
        if (!parent_id > 0) {
            return;
        }
        var url = '/index/index/getRegion/level/2/parent_id/' + parent_id;
        $.ajax({
            type: "GET",
            url: url,
            error: function (request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function (v) {
                v = '<option value="0">选择城市</option>' + v;
                $('#city').empty().html(v);
            }
        });
    }

    /**
     * 获取地区
     * @param t  城市select对象
     */
    function get_area(t) {
        var parent_id = $(t).val();
        if (!parent_id > 0) {
            return;
        }
        var url = '/index/index/getRegion/level/3/parent_id/' + parent_id;
        $.ajax({
            type: "GET",
            url: url,
            error: function (request) {
                alert("服务器繁忙, 请联系管理员!");
                return;
            },
            success: function (v) {
                v = '<option>选择区域</option>' + v;
                $('#district').empty().html(v);
            }
        });
    }
</script>